<template>
  <div>
    <el-dialog
      v-dialogDrag
      title="新增用户"
      :visible.sync="dialogFormVisible"
      width="750px"
    >
      <el-form
        ref="formdata"
        :model="formdata"
        :rules="rules"
        label-width="100px"
        class="demo-formdata"
        @submit.native.prevent
      >
        <el-form-item
          label="用户名/账号"
          prop="usersAccount"
        >
          <el-input
            v-model="formdata.usersAccount"
            :disabled="bg == 1"
            @blur="verify"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="bg == 0"
          label="密码"
          prop="usersPassword"
        >
          <el-input
            v-model="formdata.usersPassword"
            :disabled="bg == 1"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-show="false"
          label="id"
        >
          <el-input v-model="formdata.usersId"></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="usersName"
        >
          <el-input v-model="formdata.usersName"></el-input>
        </el-form-item>
        <el-form-item
          label="权限"
          prop="usersRole"
        >
          <el-select
            v-model="formdata.usersRole"
            placeholder="请选择用户权限"
          >
            <el-option
              label="管理员"
              value="1"
            ></el-option>
            <el-option
              label="普通用户"
              value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="角色"
          prop="usersJob"
        >
          <el-select
            v-model="formdata.usersJob"
            placeholder="请选择用户角色"
          >
            <el-option
              label="监考老师"
              value="0"
            ></el-option>
            <el-option
              label="培训老师"
              value="1"
            ></el-option>
            <el-option
              label="监考老师&培训老师"
              value="2"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="部门"
          prop="departmentId"
        >
          <el-select
            v-model="formdata.departmentId"
            placeholder="请选择部门"
          >
            <el-option
              label="教务处"
              value="0"
            ></el-option>
            <el-option
              label="运维处"
              value="1"
            ></el-option>
            <el-option
              label="校务二处"
              value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="online_flag"
        >
          <el-select
            v-model="formdata.online_flag"
            placeholder="请您选择"
          >
            <el-option
              value=""
              label="请选择"
            />
            <el-option
              v-for="item in flagOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div style="clear: both"></div>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="submitForm('formdata')"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      title="修改密码"
      :visible.sync="dialogFormVisible2"
      width="750px"
    >
      <el-form
        ref="formdata"
        :model="formdata"
        :rules="rules"
        label-width="100px"
        class="demo-formdata"
        @submit.native.prevent
      >
        <el-form-item
          label="用户名/账号"
          prop="usersAccount"
        >
          <el-input
            v-model="formdata.usersAccount"
            :disabled="bg == 2"
            @blur="verify"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="usersPassword"
        >
          <el-input
            v-model="formdata.usersPassword"
            :disabled="bg !== 2"
          ></el-input>
        </el-form-item>
        <div style="clear: both"></div>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible2 = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="submitForm('formdata')"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {verifyUser,changePassword} from '@/api'
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible2:false,
      formdata: {
        usersAccount: "",
        usersName: "",
        usersPassword: "",
        usersRole: "",
        usersJob: "",
        departmentId: "",
        online_flag: "",
        usersId: "",
      },
      bg: 0,
      formLabelWidth: "120px",
      // 状态(启用/锁定)
      flagOptions: [
        { name: "启用", value: 0 },
        { name: "锁定", value: 1 },
      ],
      rules: {
        usersAccount: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        usersName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        usersPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],

        usersRole: [
          { required: true, message: "请选择用户权限", trigger: "change" },
        ],
        usersJob: [
          { required: true, message: "请选择用户角色", trigger: "change" },
        ],
        departmentId: [
          { required: true, message: "请选择用户部门", trigger: "change" },
        ],
        online_flag: [
          { required: true, message: "请选择用户状态", trigger: "change" },
        ],
      },
      resetForm() {
        this.$refs["formdata"].resetFields();
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.bg == 2){
changePassword({
  usersPassword:this.formdata.usersPassword,
  usersId:this.formdata.usersId,
}).then(res=>{
  console.log(res);
  if (res.result_code ==200) {
    this.$message.success("密码修改成功!")
    this.dialogFormVisible2 = false
  }
})
          }else{
            this.$emit("addlist", this.formdata);
          }
          
          this.dialogFormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    verify(){
      verifyUser({usersAccount:this.formdata.usersAccount}).then(res=>{
        console.log(res);
        if(res.result_code == 500){
          this.$message.warning("用户名已存在!");
          this.formdata.usersAccount = '';
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 45%;
  float: left;
}
</style>
